<template>
	<view class="PointsDetails bigestBox">
		<view class="flex" style="margin-top: 46rpx; justify-content: center;">
			<image src="/static/images/CommissionDetails/one_tow_three.png" mode=""
				style="width: 480rpx; height: 296rpx;"></image>
		</view>
		<view class="text flex" style="justify-content: center; margin-top: 40rpx;">
			所有积分以完成交易/已结算后才能获得相应积分数额。
		</view>
		<view class="totalPoints flex_jcsb boxSize_bb">
			<view class="tp_left flex">
				<image src="/static/images/CommissionDetails/totalCommition.png" mode=""
					style="width: 40rpx;height: 40rpx;"></image>
				<text class="tpl_text">总积分</text>
			</view>
			<view class="tp_right yellowText">{{ totalPoints }}</view>
		</view>
		<view class="pdText blackText" style="margin-top: 30rpx;margin-left: 30rpx;">积分明细</view>
		<view class="pdList flexDeCo">
			<view class="pdl_item boxSize_bb"
				v-for="(item, index) in pointsList"
				:key="item.id"
				style="padding: 30rpx;background: #FFFFFF;width: 690rpx; margin: 20rpx auto 0 auto;">
				<view class="pdl_top flex_jcsb">
					<view class="pdlt_left blackText">{{ item.remark }}</view>
					<view class="pdlt_right grayText">积分</view>
				</view>
				<view class="pdl_bottom flex_jcsb" style="margin-top: 6rpx;">
					<view class="pdlb_left grayDate">{{ formatTime(item.createTime) }}</view>
					<view class="pdlb_right yellowText">{{ formatAmount(item.score, item.type) }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getPointsPage,
	getPointsTotal
} from "../../api/points"

export default {
	data() {
		return {
			totalPoints: 0,
			pointsList: [],
			current: 1,
			size: 10,
			total: 0,
			loading: false,
			hasMore: true
		};
	},
	onLoad() {
		this.getPointsData()
		this.getPointsTotalData()
	},
	onReachBottom() {
		if (this.hasMore && !this.loading) {
			this.current++
			this.getPointsData()
		}
	},
	methods: {
		async getPointsData() {
			if (!this.hasMore || this.loading) return
			
			try {
				this.loading = true
				const res = await getPointsPage({
					current: this.current,
					size: this.size
				})
				
				if (res && res.data) {
					this.pointsList = this.current === 1 
						? res.data.records 
						: [...this.pointsList, ...res.data.records]
					
					this.total = res.data.total
					this.hasMore = this.pointsList.length < this.total
				}
			} catch (err) {
				console.log('获取积分明细失败:', err)
			} finally {
				this.loading = false
			}
		},
		async getPointsTotalData() {
			try {
				const res = await getPointsTotal()
				if (res && res.data) {
					this.totalPoints = res.data
				}
			} catch (err) {
				console.log('获取总积分失败:', err)
			}
		},
		formatTime(time) {
			return time ? time.replace('T', ' ') : ''
		},
		formatAmount(score, type) {
			if (!score || score === 0) return '0'
			if (type === 1) return `+${score}`
			if (type === 2) return `-${score}`
			return score
		}
	}
}
</script>
<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

	.PointsDetails {
		padding-top: 10rpx;
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 26rpx;
		letter-spacing: 0px;
		color: #000000;

		//公共样式
		.yellowText {
			font-weight: 600;
			font-size: 28rpx;
			color: #FF4D00;
		}

		.blackText {
			font-size: 28rpx;
		}

		.grayText {
			font-size: 28rpx;
			color: #22222259;
		}

		.grayDate {
			font-size: 24rpx;
			color: #00000059;
		}

		.text {
			color: #979797;
		}

		.totalPoints {
			padding: 30rpx;
			width: 690rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin: 80rpx auto 0 auto;

			.tp_left {
				.tpl_text {
					font-weight: 600;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style> 